import { PureComponent } from "react"
import { Carousel } from "antd-mobile"
import { isNull } from "../../utils/helper"
import MAction from "../MAction/MAction"
interface Props {
	duration?: any,
	is_img?: any,
	list: any[],
	vertical?: any,
	show_dots?: any,
	autoplay?: any,
	speed?: any,
	dataset_key?: string,
	event_key?: string
}
interface State {
	data: any[],
	imgHeight: any,
}
export default class MCarousel extends PureComponent<Props, State>{
	public state: State = {
		data: [],
		imgHeight: 237,
	}
	componentWillMount() {
		let width = window.screen.width;
		// this.setState({
		// 	imgHeight: width * 9 / 16
		// })
	}
	render() {
		let { imgHeight } = this.state;
		let { duration = 3000, is_img = 1, list, vertical, show_dots, autoplay = 1, speed = 500, dataset_key } = this.props;
		let showDots = show_dots !== 0 && show_dots !== "0" && show_dots !== false;
		console.log(dataset_key, list)
		if (isNull(dataset_key) || isNull(list)) {
			// console.log("没有配置dataset_key",this.props);
			return null
		}
		if (list.length > 0) {
			return (
				<div className="mi-carousel" style={{ height: imgHeight }}>
					<Carousel
						style={{
							background: "#DEF1E5",
							overflow: "hidden"
						}}
						frameOverflow="visible"
						infinite
						dots={showDots}
						vertical={vertical == 1}
						autoplayInterval={duration}
						autoplay={autoplay === 1 || autoplay === "1"}
						speed={speed}
						dragging={false}
						resetAutoplay={false}
					>
						{list.map((val, index) => {
							if (isNull(val)) {
								val = {}
							}
							let { event_key, url } = val;
							if (is_img == 1) {
								return (
									<img
										key={index}
										src={url}
										style={{ width: '100%', height: imgHeight+"px", verticalAlign: 'top' }}
										onLoad={() => {
											window.dispatchEvent(new Event('resize'));
											this.setState({ imgHeight: 'auto' });
										}}
										onClick={() => {
											MAction({ ...this.props }, event_key || this.props.event_key)
										}}
									/>
								)
							}
							else {
								window.dispatchEvent(new Event('resize'));
								this.setState({ imgHeight: 'auto' });
								return (
									<div key={index}
										onClick={() => {
											MAction({ ...this.props }, event_key || this.props.event_key)
										}}>
										{val}
									</div>
								)
							}
						})}
					</Carousel>
				</div>
			)
		}
		else {
			return (
				<div style={{ width: "100%", height: "237px" }}></div>
			)
		}
	}
}